/**
  * 根据数据渲染导航列表
  1. 通过具名路由的方式，进行 router-link 配置；
  2. 通过 exact ，来配置跳转的路由 active 状态，url 与 path 的匹配方式；
  3. 通过 isActive 判断当前的 hash 值是与 router-link 的路径匹配；
 */

<template>
  <ul class="Menu-content">
    <li
      class="item"
      v-for="it in menuList"
      :key="it.link"
      :class="{ active: isActive(it) }"
    >
      <RouterLink
        :to="{ name: it.name }"
        :exact="it.exact"
        :active-class="'active'"
      >
        <Icon :type="it.type" />
        <div class="text">{{ it.txt }}</div>
      </RouterLink>
    </li>
  </ul>
</template>

<script>
import Icon from "@/components/Icon";
export default {
  data() {
    return {
      link: "/",
      menuList: [
        {
          type: "home",
          name: "Home",
          txt: "首页",
          exact: true,
        },
        {
          type: "blog",
          name: "Blog",
          txt: "文章",
          exact: false,
        },
        {
          type: "about",
          name: "About",
          txt: "关于我",
          exact: true,
        },
        {
          type: "code",
          name: "Project",
          txt: "项目&效果",
          exact: true,
        },
        {
          type: "chat",
          name: "Chat",
          txt: "留言板",
          exact: true,
        },
      ],
    };
  },
  components: {
    Icon,
  },
  methods: {
    isActive(item) {
      let path = location.hash.substring(1);
      if (item.startWidth) {
        return path.startsWith(item.link);
      } else {
        return path === item.link;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~@/style/var.less");
@import url("~@/style/global.less");
.Menu-content {
  margin: 30px auto;
  width: 100%;
  color: @lightWords;
  .active {
    background-color: lighten(@dark, 5%);
    font-weight: bold;
  }
  .item {
    height: 44px;
    line-height: 44px;

    a {
      padding-left: 40px;
      display: flex;
      align-items: center;

      .text {
        margin-left: 10px;
      }
    }
  }
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    padding: 0;
    margin: 0;
  }
}

// 字体图标样式
.iconfont {
  font-size: 0.9rem;
}
</style>